<template>
  <div>
    <div class="fun-btn clear">
      <el-button size="small"
                 type="primary"
                 style="float: right"
                 icon="el-icon-back"
                 @click="$router.go(-1)">返回
      </el-button>
    </div>
    <div v-loading="tableLoading">
      <ul class="text-type" v-if="tableData.length>0">
        <li v-for="(item, index) in tableData"
            :key="index">
          <div v-if="item.fileName.indexOf('.jpg') > 0 ||
                item.fileName.indexOf('.png') > 0 ||
                item.fileName.indexOf('.jpeg') > 0">
            <img :src="require('@/assets/house/img.png')" alt=""/>
            <p>图片</p>
          </div>
          <div v-if="item.fileName.indexOf('.docx') > 0 || item.fileName.indexOf('.doc') > 0">
            <img :src="require('@/assets/house/word.png')" alt=""/>
            <p>word</p>
          </div>
          <div v-if="item.fileName.indexOf('.pdf') > 0">
            <img @click="handleShowDialog('pdf')" :src="require('@/assets/house/pdf.png')" alt=""/>
            <p>pdf</p>
          </div>
          <div v-if="item.fileName.indexOf('.mp4') > 0">
            <img @click="handleShowDialog('video')" :src="require('@/assets/house/video.png')" alt=""/>
            <p>video</p>
          </div>

        </li>
      </ul>

      <div class="empty" v-if="tableData.length<1">
        暂无数据
      </div>
    </div>

    <el-dialog :title="'查看'"
               width="80%"
               top="2vh"
               :destroy-on-close="true"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               :visible.sync="dialogShow"
               :before-close="handleClose">

      <div class="dialog-content">
        <pdf-js-iframe v-if="type === 'pdf'" :url="pdfSrc"></pdf-js-iframe>
        <video v-if="video"
               :src="videoSrc"
               autoplay
               height="100%"
               width="100%"
               controls="controls">
          您的浏览器不支持 video 标签。
        </video>
      </div>

    </el-dialog>

  </div>
</template>

<script>
import { getOriginalImgList, getPdfOriginal } from '../../../../../api/electronicsFile/electronicsFile'
import PdfJsIframe from '../../../../../components/showPdf/pdfJsIframe'
import { getObjectURL } from '../../../../../util/util'

export default {
  name: 'ReadOriginalText',
  components: { PdfJsIframe },
  data () {
    return {
      tableLoading: false,
      dialogShow: false,
      type: '',
      tableData: [],
      imgs: [],
      word: [],
      pdf: [],
      video: [],
      pdfSrc: '',
      videoSrc: ''
    }
  },
  mounted () {
    this.onLoad()
  },
  methods: {
    onLoad () {
      // 加载列表
      this.tableLoading = true
      const query = {
        pageSize: 1000,
        pageNo: 1,
        params: [{
          op: 'eq',
          name: 'id_record',
          value: this.$route.query.id_record // '20210903100011223' // this.$route.query.id_record
        }]
      }
      const idTable = this.$route.query.idTable // '1428244355862392833' // this.$route.query.idTable

      getOriginalImgList(idTable, query).then(res => {
        this.tableData = res.data.data.records
        this.tableLoading = false
        /* this.tableData.map(item => {
            if (item.fileName.indexOf('.pdf') > 0) {
              this.pdf.push(item)
            } else if (
              item.fileName.indexOf('.jpg') > 0 ||
                item.fileName.indexOf('.png') > 0 ||
                item.fileName.indexOf('.jpeg') > 0) {
              this.imgs.push(item)
            } else if (item.fileName.indexOf('.mp4') > 0) {
              this.video.push(item)
            }
          }) */
      })
    },
    handleShowDialog (type) {
      this.type = type
      this.dialogShow = true
      const idTable = this.$route.query.idTable // '1428244355862392833' // this.$route.query.idTable
      const idRecord = this.$route.query.id_record // '20210903100011223' // this.$route.query.id_record
      getPdfOriginal(idTable, idRecord).then(res => {
        if (type === 'pdf') {
          // 请求pdf流文件后转vue-pdf预览用的src
          this.pdfSrc = getObjectURL(res.data)
        }
        if (type === 'video') {
          //
          this.videoSrc = getObjectURL(res.data)
        }
      })
    },
    handleClose (done) {
      this.type = ''
      done()
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "../../../../../styles/mixin";

  .text-type {
    @include fj(flex-start);
    align-items: center;
    height: calc(100vh - 160px);
    padding: 0 50px;
    flex-wrap: wrap;

    li {
      width: 180px;
      padding: 0 15px;
      text-align: center;
      cursor: pointer;

      img {
        height: 129px;
      }

      &:hover {
        opacity: 0.8;
      }

      p {
        margin-top: 15px;
        font-size: 16px;
      }
    }
  }

  .empty {
    text-align: center;
    padding-top: 120px;
  }

  ::v-deep .el-dialog {
    margin-bottom: 0;

    .dialog-content {
      height: calc(98vh - 130px);
    }
  }

</style>
